<template>
  <uv-vtabs
    :list="list"
    :current="current"
    :height="height"
    :chain="chain"
    :bar-width="barWidth"
    :bar-bg-color="barBgColor"
    @change="handleChange"
    @scrolltolower="handleScrollToLower"
    class="vtabs-container"
  >
    <uv-vtabs-item v-for="(item, index) in list" :key="index" :index="index">
      <!-- 联动模式：显示所有内容 -->
      <view v-if="chain" class="content-item">
        <view class="search-bar">
          <uv-search
            placeholder="搜索商品..."
            shape="round"
            bg-color="#f5f5f5"
            class="search-input"
          />
        </view>
        <view class="product-list">
          <view
            v-for="product in item.products || []"
            :key="product.id"
            class="product-card"
          >
            <view class="product-icon">
              <image
                :src="product.icon || '/static/default-icon.png'"
                class="icon-img"
                mode="aspectFit"
              />
            </view>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="price-row">
                <text class="current-price">¥{{ product.price }}</text>
                <text v-if="product.originalPrice" class="original-price"
                  >¥{{ product.originalPrice }}</text
                >
              </view>
              <view class="sales-row">
                <text class="sales-text">月售{{ product.sales || 0 }}</text>
                <text v-if="product.rating" class="rating-text"
                  >{{ product.rating }}星{{ product.reviewCount || 0 }}***</text
                >
              </view>
            </view>
            <view class="product-action">
              <view class="cart-btn" @click.stop="showProductDetail(product)">
                <text class="cart-icon">🛒</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 非联动模式：只显示当前选中项 -->
      <view v-else-if="index === currentIndex" class="content-item">
        <view class="search-bar">
          <uv-search
            placeholder="搜索商品..."
            shape="round"
            bg-color="#f5f5f5"
            class="search-input"
          />
        </view>
        <view class="product-list">
          <view
            v-for="product in item.products || []"
            :key="product.id"
            class="product-card"
          >
            <view class="product-icon">
              <image
                :src="product.icon || '/static/default-icon.png'"
                class="icon-img"
                mode="aspectFit"
              />
            </view>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <view class="price-row">
                <text class="current-price">¥{{ product.price }}</text>
                <text v-if="product.originalPrice" class="original-price"
                  >¥{{ product.originalPrice }}</text
                >
              </view>
              <view class="sales-row">
                <text class="sales-text">月售{{ product.sales || 0 }}</text>
                <text v-if="product.rating" class="rating-text"
                  >{{ product.rating }}星{{ product.reviewCount || 0 }}***</text
                >
              </view>
            </view>
            <view class="product-action">
              <view class="cart-btn" @click.stop="showProductDetail(product)">
                <text class="cart-icon">🛒</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </uv-vtabs-item>
  </uv-vtabs>
</template>

<script setup>
import { ref } from 'vue';

// 定义props
const props = defineProps({
  // 数据列表
  list: {
    type: Array,
    default: () => [],
  },
  // 当前选中
  current: {
    type: Number,
    default: 0,
  },
  // 高度
  height: {
    type: [String, Number],
    default: 'auto',
  },
  // 是否联动
  chain: {
    type: Boolean,
    default: false,
  },
  // 左侧宽度
  barWidth: {
    type: [String, Number],
    default: '200rpx',
  },
  // 左侧背景色
  barBgColor: {
    type: String,
    default: '#f5f5f5',
  },
});

// 定义emits
const emit = defineEmits(['change', 'scrolltolower', 'show-product-detail']);

// 当前选中项索引
const currentIndex = ref(props.current);

// 事件处理
const handleChange = (index) => {
  currentIndex.value = index;
  emit('change', index, props.list[index]);
};

const handleScrollToLower = (index) => {
  emit('scrolltolower', index, props.list[index]);
};

// 显示商品详情 - 通过事件通知页面
const showProductDetail = (product) => {
  emit('show-product-detail', product);
};
</script>

<style scoped>
.vtabs-container {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.vtabs-container :deep(.uv-vtabs) {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.vtabs-container :deep(.uv-vtabs__content) {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.content-item {
  background-color: #f5f5f5;
  width: 100%;
  overflow: hidden;
}

.search-bar {
  padding: 20rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  box-sizing: border-box;
}

.search-input {
  width: 100%;
  box-sizing: border-box;
}

.search-input :deep(.uv-search) {
  width: 100%;
  box-sizing: border-box;
}

.search-input :deep(.uv-search__content) {
  width: 100%;
  box-sizing: border-box;
}

.search-input :deep(.uv-search__input) {
  width: 100%;
  box-sizing: border-box;
}

.product-list {
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.product-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.product-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: #4285f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.icon-img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.product-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  width: 100%;
  max-width: 100%;
}

.price-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  overflow: hidden;
}

.current-price {
  font-size: 36rpx;
  color: #ff4444;
  font-weight: bold;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  flex-shrink: 0;
}

.sales-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  overflow: hidden;
}

.sales-text {
  font-size: 24rpx;
  color: #666;
  flex-shrink: 0;
}

.rating-text {
  font-size: 24rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.product-action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-btn {
  width: 60rpx;
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.cart-btn:active {
  background-color: #e0e0e0;
}

.cart-icon {
  font-size: 32rpx;
  color: #666;
}
</style>
